<template>
    <div class="container">
        <Header :left="true" title="订单详情"></Header>

        <div class="box">
            <div class="order-box" v-for="(item,index) in detail.items" :key="index">
                <div class="status" style="color: #409EFF;" >{{detail.stateName}}</div>
                <img class="order-img" :src="item.productPic" />
                <div class="product-title" style="margin-top:10px;">{{item.productName}}</div>
                <div class="product-desc">{{fAttr(item.skuAttributes)}}</div>
                <div class="product-desc" style="margin-top:10px;" >数量 * {{item.num}}</div>
            </div>
            <div class="list-footer" style="font-size:14px;">
                <span v-if="channel === detail.channel">
                    佣金提成：<span style="color:red;" >{{fMoney(null,null,detail.commissionAmount)}}</span>
                </span>

                <span v-if="channel === detail.parentChannel">
                    推荐提成：<span style="color:red;" >{{fMoney(null,null,detail.recommendCommissionAmount)}}</span>
                </span>
            </div>
        </div>

        <div class="box" style="margin-top:20px">
            <div class="box-item">
                设备售价
                <div class="box-item-right">¥ {{fMoney(null,null,detail.allPledge)}}</div>
            </div>
            <div class="box-item">
                总租金
                <div class="box-item-right">¥ {{fMoney(null,null,detail.allMoney)}}</div>
            </div>
            <div class="box-item">
                预付租金
                <div class="box-item-right">¥ {{fMoney(null,null,detail.prepareMoney)}}</div>
            </div>
            <div class="box-item">
                剩余租金
                <div class="box-item-right" @click="showitem = !showitem">
                    ¥ {{fMoney(null,null,detail.allMoney - detail.prepareMoney)}}
                    <div style="width:20px;vertical-align:middle;display:inline-block">
                        <i style="font-size:24px;color:#606266;" :class="showitem ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
                    </div>
                </div>
                <div v-show="showitem" class="s-list" style="padding:10px 10px 10px 10px;font-size:14px;" >
                    <div class="flex" style="margin-top:10px;color:#606266;" v-for="(stage,sIndex) in detail.stages" :key="sIndex">
                        <div class="flex-item">第{{stage.sort}}期</div>
                        <div class="flex-item" style="text-align:right;" >¥ {{fMoney(null,null,stage.money)}}</div>
                    </div>
                </div>
            </div>
            <div class="box-item">
                买断尾款
                <div class="box-item-right">¥ {{fMoney(null,null,detail.showAllActualMoney)}}</div>
            </div>
            <div class="box-item">
                租期
                <div class="box-item-right">
                    {{fYmdDate(null,null,detail.beginDate)}}至{{fYmdDate(null,null,detail.endDate)}}
                </div>
            </div>
        </div>

        <div class="box" style="margin-top:20px">
            <div class="box-item">
                订单类型
                <div class="box-item-right">{{detail.orderType === 1 ? '线上订单' : '线下订单'}}</div>
            </div>
            <div class="box-item">
                下单编号
                <div class="box-item-right">{{detail.orderNumber}}</div>
            </div>
            <div class="box-item">
                下单时间
                <div class="box-item-right">{{fDate(null,null,detail.createDate)}}</div>
            </div>
            <div class="box-item">
                所属门店
                <div class="box-item-right">{{detail.shopName}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import Header from '../../common/Header.vue';
export default {
    components:{Header},
    data:function(){
        return {
            channel:'',
            showitem:true,
            detail:{id:0,commissionAmount:0,items:[]}
        };
    },
    created:function(){
        var info = getLogin();
        if(info != null){
            this.channel = info.channel;
        }
        this.loadData();
    },
    methods:{
        loadData(){
            var that = this;
            that.$api.post('/channel/order/findById.json?id='+that.$route.params.id,{}).then(data=>{
                if(data.data.code != '0'){
                    that.$message.error(data.data.msg);
                    return;
                }
                var showAllActualMoney = 0;
                data.data.data.items.forEach(item =>{
                   showAllActualMoney += item.actualMoney;
                });
                data.data.data.showAllActualMoney = showAllActualMoney;
                that.detail = data.data.data;

            });
        },
        fAttr(attr){
            try{
                var atVal = JSON.parse(attr);
                return atVal.map(item => {return item.value}).join('/');
            }catch(e){}
        }
    }
}
</script>
<style scoped>
    .container{
        width: 100%;min-height: 100%;
        background: #F2F6FC;
        padding: 20px;
    }
    .box{
        width: 100%;
        padding:10px 10px;
        background: #fff;
        border-radius: 10px;
    }
    .box .box-item{
        padding: 15px 5px;
        border-bottom: 1px solid #E4E7ED;
        position: relative;
        overflow: hidden;
        clear: both;
        float: none;
    }
    .box .box-item:last-child{
        border-bottom: none;
    }
    .box .box-item .box-item-right{
        float: right;
    }
    .order-box{
        width: 100%;
        min-height: 100px;
        position: relative;
        padding: 0 0 0 90px;
    }
    .order-box .order-img{
        width: 80px;
        height: 80px;
        position: absolute;
        top:0;left: 0;;
    }
    .order-box .product-title{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        margin-bottom: 10px;
        padding-right: 80px;
    }
    .order-box .product-desc{
        font-size: 12px;
        color: #909399;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
    }
    .order-box .status{
        position: absolute;
        top:0;
        right:10px;
    }
</style>
